<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>企业门户</title>
    <link rel="stylesheet" href="style.css">
</head>
<body class="page-dual-images">
    <canvas id="particle-canvas"></canvas>
    <header>
        <!-- 多层动画横幅背景 -->
        <div class="animated-banner">
            <div class="layer"><img src="images/layer_1.webp" data-height="360" data-width="3840" height="169" width="1804" style="height: 169.2px; width: 1804.8px; transform: translate(0px, 0px) rotate(0deg) scale(1); opacity: 1;"></div>
            <div class="layer"><img src="images/layer_2.webp" data-height="360" data-width="3840" height="169" width="1804" style="height: 169.2px; width: 1804.8px; transform: translate(0px, 0px) rotate(0deg) scale(1); opacity: 1;"></div>
            <div class="layer"><img src="images/layer_3.webp" data-height="360" data-width="3840" height="169" width="1804" style="height: 169.2px; width: 1804.8px; transform: translate(0px, 0px) rotate(0deg) scale(1); opacity: 1;"></div>
            <div class="layer"><img src="images/layer_4.webp" data-height="360" data-width="3840" height="169" width="1804" style="height: 169.2px; width: 1804.8px; transform: translate(0px, 0px) rotate(0deg) scale(1); opacity: 1;"></div>
            <div class="layer"><img src="images/layer_5.webp" data-height="360" data-width="3840" height="169" width="1804" style="height: 169.2px; width: 1804.8px; transform: translate(0px, 0px) rotate(0deg) scale(1); opacity: 1;"></div>
            <div class="layer"><img src="images/layer_6.webp" data-height="360" data-width="3840" height="169" width="1804" style="height: 169.2px; width: 1804.8px; transform: translate(0px, 0px) rotate(0deg) scale(1); opacity: 1;"></div>
            <div class="layer"><img src="images/layer_7.webp" data-height="360" data-width="3840" height="169" width="1804" style="height: 169.2px; width: 1804.8px; transform: translate(0px, 0px) rotate(0deg) scale(1); opacity: 1;"></div>
            <div class="layer"><img src="images/layer_8.webp" data-height="360" data-width="3840" height="169" width="1804" style="height: 169.2px; width: 1804.8px; transform: translate(0px, 0px) rotate(0deg) scale(1); opacity: 1;"></div>
            <div class="layer"><img src="images/layer_9.webp" data-height="360" data-width="3840" height="169" width="1804" style="height: 169.2px; width: 1804.8px; transform: translate(0px, 0px) rotate(0deg) scale(1); opacity: 1;"></div>
            <div class="layer"><img src="images/layer_10.webp" data-height="360" data-width="3840" height="169" width="1804" style="height: 169.2px; width: 1804.8px; transform: translate(0px, 0px) rotate(0deg) scale(1); opacity: 1;"></div>
            <div class="layer"><img src="images/layer_11.webp" data-height="360" data-width="3840" height="169" width="1804" style="height: 169.2px; width: 1804.8px; transform: translate(0px, 0px) rotate(0deg) scale(1); opacity: 1;"></div>
            <div class="layer"><img src="images/layer_12.webp" data-height="360" data-width="3840" height="169" width="1804" style="height: 169.2px; width: 1804.8px; transform: translate(0px, 0px) rotate(0deg) scale(1); opacity: 1;"></div>
            <div class="layer"><img src="images/layer_13.webp" data-height="360" data-width="3840" height="169" width="1804" style="height: 169.2px; width: 1804.8px; transform: translate(0px, 0px) rotate(0deg) scale(1); opacity: 1;"></div>
            <div class="layer"><img src="images/layer_14.webp" data-height="360" data-width="3840" height="169" width="1804" style="height: 169.2px; width: 1804.8px; transform: translate(0px, 0px) rotate(0deg) scale(1); opacity: 1;"></div>
            <div class="layer"><img src="images/layer_15.webp" data-height="360" data-width="3840" height="169" width="1804" style="height: 169.2px; width: 1804.8px; transform: translate(0px, 0px) rotate(0deg) scale(1); opacity: 1;"></div>
            <div class="layer"><img src="images/layer_16.webp" data-height="360" data-width="3840" height="169" width="1804" style="height: 169.2px; width: 1804.8px; transform: translate(0px, 0px) rotate(0deg) scale(1); opacity: 1;"></div>
            <div class="layer"><img src="images/layer_17.webp" data-height="360" data-width="3840" height="169" width="1804" style="height: 169.2px; width: 1804.8px; transform: translate(0px, 0px) rotate(0deg) scale(1); opacity: 1;"></div>
            <div class="layer"><img src="images/layer_18.webp" data-height="360" data-width="3840" height="162" width="1728" style="height: 162px; width: 1728px; transform: translate(0px, 0px) rotate(0deg) scale(1); opacity: 1;"></div>
            <div class="layer"><img src="images/layer_19.webp" data-height="360" data-width="3840" height="162" width="1728" style="height: 162px; width: 1728px; transform: translate(-2.25px, -2.25px) rotate(0deg) scale(1); opacity: 1;"></div>
            <div class="layer"><img src="images/layer_20.webp" data-height="360" data-width="3840" height="169" width="1804" style="height: 169.2px; width: 1804.8px; transform: translate(0px, 0px) rotate(0deg) scale(1); opacity: 1;"></div>
            <div class="layer"><img src="images/layer_21.webp" data-height="360" data-width="3840" height="169" width="1804" style="height: 169.2px; width: 1804.8px; transform: translate(0px, 0px) rotate(0deg) scale(1); opacity: 1;"></div>
        </div>
        
        <nav>
            <a href="#" class="logo">企业门户</a>
            <ul>
                <li><a href="index.html">首页</a></li>
                <li><a href="#">关于我们</a></li>
                <li><a href="features.html">功能页</a></li>
                <li><a href="#">联系我们</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section class="hero">
            <div class="hero-text">
                <h1>创新引领未来</h1>
                <p>致力于提供卓越的解决方案，推动行业变革</p>
                <a href="features.html" class="cta-button">了解更多</a>
            </div>
        </section>

        <section class="features-preview scroll-animate">
            <div class="container">
                <h2 class="section-title">核心优势</h2>
                <div class="features-grid">
                    <div class="feature-card">
                        <div class="feature-icon">🚀</div>
                        <h3>高效创新</h3>
                        <p>采用最新技术，提供高效的解决方案</p>
                    </div>
                    <div class="feature-card">
                        <div class="feature-icon">🎯</div>
                        <h3>精准定位</h3>
                        <p>深入了解客户需求，提供精准服务</p>
                    </div>
                    <div class="feature-card">
                        <div class="feature-icon">⚡</div>
                        <h3>快速响应</h3>
                        <p>7x24小时专业服务，快速响应客户需求</p>
                    </div>
                </div>
            </div>
        </section>

        <section class="stats-section scroll-animate">
            <div class="container">
                <h2 class="section-title">数据说话</h2>
                <div class="stats-grid">
                    <div class="stat-item">
                        <div class="stat-number" data-target="1000">0</div>
                        <div class="stat-label">成功项目</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-number" data-target="500">0</div>
                        <div class="stat-label">合作伙伴</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-number" data-target="99">0</div>
                        <div class="stat-label">客户满意度%</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-number" data-target="24">0</div>
                        <div class="stat-label">小时服务</div>
                    </div>
                </div>
            </div>
        </section>

        <section class="testimonials scroll-animate">
            <div class="container">
                <h2 class="section-title">客户评价</h2>
                <div class="testimonials-grid">
                    <div class="testimonial-card">
                        <div class="testimonial-content">
                            <p>"优秀的团队，专业的服务，为我们的业务发展提供了强有力的支持。"</p>
                            <div class="testimonial-author">
                                <strong>张总</strong>
                                <span>科技公司CEO</span>
                            </div>
                        </div>
                    </div>
                    <div class="testimonial-card">
                        <div class="testimonial-content">
                            <p>"创新的解决方案帮助我们在竞争激烈的市场中脱颖而出。"</p>
                            <div class="testimonial-author">
                                <strong>李经理</strong>
                                <span>制造业企业</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <footer>
        <p>&copy; 2024 企业名称. 保留所有权利.</p>
    </footer>

    <script src="script.js"></script>
</body>
</html>